import { LikeOutlined, StarOutlined } from '@ant-design/icons';
import { useSetState } from 'ahooks';
import { Alert, Rate } from 'antd';
import { useTranslation } from 'react-i18next';

const LikeControl = () => {
  const { t } = useTranslation();
  const [count, setCount] = useSetState({
    like: 0,
    collect: 0,
  });
  const { like, collect } = count;

  return (
    <>
      <Alert showIcon type="warning" message={t('likeControlAdvice')} />
      <span>
        <Rate
          allowClear={false}
          count={1}
          character={<LikeOutlined />}
          onChange={() => setCount({ like: like + 1 })}
        />
        <span className="ml-2">{like}</span>
      </span>
      <span className="ml-4">
        <Rate
          allowClear={false}
          count={1}
          character={<StarOutlined />}
          onChange={() => setCount({ collect: collect + 1 })}
        />
        <span className="ml-2">{collect}</span>
      </span>
    </>
  );
};

export default LikeControl;
